<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage">
    <l-panel>
      <template #toolLeft>
        <div class="l-panel--item">
          <el-input
            :placeholder="$t('请输入关键字')"
            @keyup.enter.native="hanleSearch"
            v-model="searchWord"
            size="mini"
          >
            <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </template>
      <template #toolRight>
        <l-tool-btns @click="handleAdd()">
          <l-excel-btns></l-excel-btns>
        </l-tool-btns>
      </template>
      <l-table
        :loading="tableLoading"
        :columns="columns"
        :dataSource="tableData"
        :row-key="mainType.f_Code"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
      >
        <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-panel>
    <l-dialog
      :width="500"
      :height="columns.length * 48 + 88"
      :title="formTitle"
      :visible.sync="formVisible"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form ref="form"></my-form>
    </l-dialog>
  </l-layout>
</template>

<script>
import MyForm from "./form";
const api = window.$api.language.mapping;
export default {
  components: {
    MyForm,
  },
  data() {
    return {
      lr_isPage: true,
      searchWord: "",
      tableBtns: [
        { prop: "Edit", label: "编辑" },
        { prop: "Delete", label: "删除" },
      ],
      tableLoading: false,
      tableTotal: 0,
      tablePageSize: 50,
      tableCurrentPage: 1,
      tableData: [],

      formTitle: "",
      formVisible: false,
      formEdit: false,
      formEditRow: null,
    };
  },
  computed: {
    typeList() {
      return this.$store.state.language.type.list;
    },
    columns() {
      const _columns = [];
      this.typeList.forEach((item) => {
        _columns.push({ label: item.f_Name, prop: item.f_Code, minWidth: "120" });
      });
      return _columns;
    },
    mainType() {
      return this.typeList.find((t) => t.f_IsMain == 1) || {};
    },
  },
  mounted() {
    this.loadTablePageData();
  },
  methods: {
    loadTablePageData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = {
        rows: this.tablePageSize,
        page: this.tableCurrentPage,
        sidx: `${this.mainType.f_Code} DESC`,
        keyword: this.searchWord,
      };
      api
        .getPage(queryData)
        .then((res) => {
          const data = this.$deepClone(res.data.data);
          this.tableData = data.rows;
          this.tableTotal = data.records;

          this.tableLoading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.tableLoading = false;
        });
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTablePageData(true);
    },
    hanleSearch() {
      this.loadTablePageData();
    },

    // 按钮方法
    handleAdd() {
      this.formEdit = false;
      this.showForm("新增翻译");
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.showForm("编辑翻译");
    },
    handleDelete($index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.remove(row.f_code).then(() => {
            this.tableData.splice($index, 1);
            this.tableTotal = this.tableTotal - 1;
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSave(showLoading, hideLoading) {
      if (this.$refs.form.validateForm()) {
        const formData = this.$refs.form.getForm();
        showLoading();
        if (this.formEdit) {
          // 修改数据
          api
            .update(this.formEditRow.f_code, formData)
            .then(() => {
              hideLoading();
              this.formVisible = false;
              this.loadTablePageData(true);
            })
            .catch(() => {
              hideLoading();
            });
        } else {
          // 新增数据
          api
            .add(formData)
            .then(() => {
              hideLoading();
              this.formVisible = false;
              this.loadTablePageData(true);
            })
            .catch(() => {
              hideLoading();
            });
        }
      }
    },

    handleOpenedForm() {
      if (this.formEdit) {
        this.$refs.form.setForm(this.$deepClone(this.formEditRow));
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
    showForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
  },
};
</script>
